<template>
    <div class="sedc-top-bar">
        <NowDate />
        <RouterLink v-if="!userConfigStore.hasLoggedIn" :to="{ path: '/login' }">{{ $t('登录') }}</RouterLink>
        <template v-else>
            <el-popover placement="top-start" :offset="4" trigger="click" popper-class="top-user-popper">
                <UserInfoPanel></UserInfoPanel>
                <template #reference>
                    <div class="user-entry-item">
                        <div class="user-avatar-container">
                            <el-icon color="#fff" :size="22">
                                <ElIconAvatar />
                            </el-icon>
                            <span class="user-display-name">{{ userConfigStore.userName }}</span>
                        </div>
                    </div>
                </template>
            </el-popover>
        </template>
    </div>
</template>
<script setup lang="ts">
import { userConfig } from '@/pages/pinia/user/index'
const userConfigStore = userConfig()

</script>
<style lang="scss">
.sedc-top-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    height: 100%;
    color: rgba(255, 255, 255, 0.68);

    .user-avatar-container {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
    }

    a {
        color: rgba(255, 255, 255, 0.68);
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 1px;

        &:hover {
            color: #fff9;
        }
    }
}

.top-user-popper.el-popover.el-popper {
    min-width: 240px;
    border-radius: 2px;
    background: #3E4047;
    border: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);

    &.is-light .el-popper__arrow::before {
        background-color: #3E4047;
        border: 0;
    }
}
</style>